import React            from 'react'
import PageTitle        from 'component/page-title/index.jsx'
import MUtil            from "util/mm.jsx";
import Product          from "service/product-service.jsx";
import CategorySelector from './category-selector.jsx';

import './save.scss';

let _mm = new MUtil();
let _product = new Product();
export default class ProductDetil extends React.Component {
  constructor(props) {
    super(props);
    this.state= {
      id                : this.props.match.params.pid,
      name              : '',
      subtitle          : '', 
      categoryId        : 0,
      parentCategoryId  : 0,
      subImages         : [],
      price             : '',
      stock             : '',
      detail            : '',
      status            : 1,  // 商品状态1为在售
    }
  }
  // 简单字段的改变，商品名称，描述，价格，库存
  onValueChange(e) {
    let name  = e.target.name,
        value = e.target.value.trim();
    this.setState({
      [name] : value
    })
  }
  // 加载商品详情
  loadProduct() {
    // 有id的时候，表示是编辑功能，需要表单回填
    if(this.state.id){
      _product.getProduct(this.state.id).then((res) => {
        let images = res.subImages.split(',');
        res.subImages = images.map((imgUri, index) => {
          return {
            uri: imgUri,
            url: res.imageHost + imgUri
          }
        });
        this.setState(res);
      }, (errMsg) => {
        _mm.errorTips(errMsg);
      })
    }
  }

  componentDidMount(){
    this.loadProduct();
  }
  render () {
    return (
      <div id="page-wrapper">
         <PageTitle title="添加商品"></PageTitle>
         <div className="form-horizontal">
          <div className="form-group">
            <label className="col-md-2 control-label">商品名称</label>
            <div className="col-md-5">
              <p className="form-control-static">{this.state.name}</p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品描述</label>
            <div className="col-md-5">
              <p className="form-control-static">{this.state.subtitle}</p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">所属分类</label>
            <CategorySelector 
              readOnly
              categoryId={this.state.categoryId}
              parentCategoryId={this.state.parentCategoryId}
            ></CategorySelector> 
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品价格</label>
            <div className="col-md-3">
              <div className="input-group">
                <input 
                  readOnly
                  type="number" 
                  className="form-control" 
                  value={this.state.price}
                />
                <span className="input-group-addon">元</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品库存</label>
            <div className="col-md-3">
              <div className="input-group">
                <input 
                  readOnly
                  type="number" 
                  className="form-control" 
                  value={this.state.stock}
                />
                <span className="input-group-addon">件</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品图片</label>
            <div className="col-md-10">
              {
                this.state.subImages.length 
                ? this.state.subImages.map((image, index) => (
                  <div key={index} className="img-con">
                    <img className="img" src={image.url} />
                  </div>
                  )) 
                : (<div>暂无图片</div>)
              }
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品详情</label>
            <div 
              className="col-md-10" 
              dangerouslySetInnerHTML={{__html: this.state.detail}}>
            </div>
          </div>
        </div>
      </div>
    );
  }
}